<template>
  <HeadContainer class="mine-legal-tos" :title="$t('title.tos')" @back="back">
    <div :class="{ loading }">
      <div v-show="!loading" class="gap-col-8 tos-list">
        <div class="font-size-14 font-weight-500 line-height-135">{{ i18n.tos?.info.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.info.content1 }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.info.content2 }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.info.content3 }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.definitions.title }}</div>
        <table class="font-size-12 font-weight-500 line-height-135">
          <tr>
            <th>{{ i18n.tos?.definitions.table.title.a }}</th>
            <th>{{ i18n.tos?.definitions.table.content.a }}</th>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.b }}</td>
            <td>{{ i18n.tos?.definitions.table.content.b }}</td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.c }}</td>
            <td>{{ i18n.tos?.definitions.table.content.c }}</td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.d }}</td>
            <td>
              {{ i18n.tos?.definitions.table.content.d }}
            </td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.e }}</td>
            <td>{{ i18n.tos?.definitions.table.content.e }}</td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.f }}</td>
            <td>{{ i18n.tos?.definitions.table.content.f }}</td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.g }}</td>
            <td>{{ i18n.tos?.definitions.table.content.g }}</td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.h }}</td>
            <td>
              {{ i18n.tos?.definitions.table.content.h }}
            </td>
          </tr>
          <tr>
            <td>{{ i18n.tos?.definitions.table.title.i }}</td>
            <td>{{ i18n.tos?.definitions.table.content.i }}</td>
          </tr>
        </table>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.aboutService.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.aboutService.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.jurisdictional.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.jurisdictional.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.minors.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.minors.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.privacyPolicy.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.privacyPolicy.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.userRegistration.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.userRegistration.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.devicesServices.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.devicesServices.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.modifications.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.modifications.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.content.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.content.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.license.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.license.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.userInteractions.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.userInteractions.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.prohibitedConduct.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.prohibitedConduct.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.customerSupport.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.customerSupport.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.advertising.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.advertising.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.creditsPurchases.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.creditsPurchases.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.cardPaymentProcessing.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.cardPaymentProcessing.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.refundPolicy.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.refundPolicy.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.becomingCreator.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.becomingCreator.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.commission.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.commission.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.thirdParty.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.thirdParty.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.termination.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.termination.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.limitationLiability.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.limitationLiability.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.indemnification.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.indemnification.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.copyright.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.copyright.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.intellectualProperty.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.intellectualProperty.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.informationSecurity.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.informationSecurity.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.governingLaw.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.governingLaw.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.contact.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.contact.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.miscellaneous.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.miscellaneous.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.tos?.language.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.tos?.language.content }}</div>
        <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.tos?.final }}</div>
        <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.tos?.fantasi }}</div>
      </div>
    </div>
  </HeadContainer>
  <Jsonld :schema="schema"></Jsonld>
</template>

<script setup>
import { ref, shallowRef, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { $t } from '@/i18n'
import Jsonld from '@/components/common/Jsonld.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { useI18nPack } from '@/compositions/request/i18nPack'

const router = useRouter()
const route = useRoute()
const i18n = useI18nPack('tos')
const emits = defineEmits(['toPage'])
const prevPath = ref(window.history.state.back)

function back() {
  console.log(`你前世是誰: ${prevPath.value}, ${JSON.stringify(route, null, 2)}`)
  if (prevPath.value && !prevPath.value?.includes('mine')) {
    router.push({
      path: prevPath.value,
    })
    console.log('你不在 mine 的話我就會出現')
  } else {
    emits('toPage', 2, 'legal')
    router.replace({ name: 'mine', params: { to: 'legal' } })
    console.log('你在 mine 的話我就會出現')
  }
}

const loading = ref(true)
watch(i18n, (newI18nValue) => {
  if (newI18nValue) {
    loading.value = false
  }
})

// Jsonld 佈置
const schema = shallowRef({
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Fantasi',
  url: 'https://www.fantasi.one/mine/legal/terms-of-service',
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/loading-skeleton.scss';

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid;
  border-color: rgb(var(--v-theme-input));
  padding: 0.5rem;
}
.loading {
  @include loading-skeleton;
}
</style>
